<template lang="pug">
.view.cp-product-man-risk.fix-flex-pos
  //- 查询
  el-form.rk-search(:inline="true")
    el-form-item
      el-radio-group(v-model="riskType", @change="changeType")
        el-radio-button(:label="0") 严重度
        el-radio-button(:label="1") 概率
        el-radio-button(:label="2") 风险矩阵
  .rk-table
    .table-wrap(v-loading="showTable")
      //- 严重度
      el-table.table(:data="levelList", highlight-current-row, size="mini", v-show="showTypes[0]")
        el-table-column(align="center" prop="value", label="值")
          template(slot-scope="scope")
            span {{ scope.row.value }}
        el-table-column(align="center" prop="degree", label="严重度")
          template(slot-scope="scope")
            el-input(v-model="scope.row.degree", v-show="scope.row.isEdit")
            span(v-text="scope.row.degree", v-show="!scope.row.isEdit")
        el-table-column(align="center" prop="definition", label="定义")
          template(slot-scope="scope")
            el-input(v-model="scope.row.definition", v-show="scope.row.isEdit")
            span(v-text="scope.row.definition", v-show="!scope.row.isEdit")
      //- 概率
      el-table.table(:data="probList", highlight-current-row, size="mini", v-show="showTypes[1]")
        el-table-column(align="center" prop="value", label="值")
          template(slot-scope="scope")
            span {{ scope.row.value }}
        el-table-column(align="center" prop="prob", label="概率")
          template(slot-scope="scope")
            el-input(v-model="scope.row.prob", v-show="scope.row.isEdit")
            span(v-text="scope.row.prob", v-show="!scope.row.isEdit")
        el-table-column(align="center" prop="definition", label="定义")
          template(slot-scope="scope")
            el-input(v-model="scope.row.definition", v-show="scope.row.isEdit")
            span(v-text="scope.row.definition", v-show="!scope.row.isEdit")
      //- 风险矩阵
      .risk-table(v-show="showTypes[2]")
        el-table.table(:data="riskNest", highlight-current-row, size="mini", :show-header="false")
          el-table-column(align="center" prop="val0")
          el-table-column(align="center" prop="val1")
          el-table-column(align="center" prop="val2")
          el-table-column(align="center" prop="val3")
          el-table-column(align="center" prop="val4")
          el-table-column(align="center" prop="val5")
          el-table-column(align="center", width="96px")
        el-table.table(:data="riskList", highlight-current-row, size="mini", :show-header="false")
          el-table-column(align="center" prop="name")
          el-table-column(align="center" prop="value")
          el-table-column(align="center" prop="level0")
          el-table-column(align="center" prop="level1")
          el-table-column(align="center" prop="level2")
          el-table-column(align="center" prop="level3")
          el-table-column(align="center", width="96px")
            template(slot-scope="scope")
              el-tooltip(content="编辑", v-show="!scope.row.isEdit")
                i.icon-act.el-icon-edit(@click="editRisk(scope.$index)")
              el-tooltip(content="添加", v-show="!scope.row.isEdit")
                i.icon-act.el-icon-plus(@click="addRisk(scope.$index)")
              el-tooltip(content="删除", v-show="!scope.row.isEdit")
                i.icon-act.el-icon-delete(@click="deleteRisk(scope.$index)")
              el-tooltip(content="确定", v-show="scope.row.isEdit")
                i.icon-act.el-icon-check(@click="insertRisk(scope.$index)")
              el-tooltip(content="取消", v-show="scope.row.isEdit")
                i.icon-act.el-icon-close(@click="cancleRisk(scope.$index)")
</template>

<script>
import ProductData from '@/data/product';
import validate from '@/utils/validate';

const { isEmpty } = validate;

export default {
  name: 'prorisk',
  data() {
    return {
      riskType: 0,
      showTypes: [true, false, false],
      levelList: [],
      levelListBc: [],
      probList: [],
      probListBc: [],
      riskList: [],
      riskListBc: [],
      showTable: true,
      riskNest: [
        { val0: '概率', val1: '', val2: '严重程度', val3: '', val4: '', val5: '' },
        { val0: '', val1: '', val2: '1', val3: '2', val4: '3', val5: '4' },
        { val0: '', val1: '', val2: '可忽略', val3: '中等', val4: '严重', val5: '灾难性' }
      ],
      statusList: [
        { name: '全部', value: null },
        { name: '待提交', value: '0' },
        { name: '待评审', value: '1' },
        { name: '待发布', value: '2' },
        { name: '待实现', value: '3' }
      ],
    };
  },
  methods: {
    // 改变风险类型
    changeType (value) {
      const showTypes = [false, false, false];
      showTypes[value] = true;
      this.showTypes = showTypes;
    },
    // 风险矩阵
    addRisk (index) {
      if (isEmpty(index)) {
        this.riskList.push({ isEdit: true });
      } else {
        this.riskList.splice((index + 1), 0, { isEdit: true });
      }
    },
    editRisk (index) {
      this.riskListBc[index] = Object.assign({}, this.riskList[index]);
      this.$set(this.riskList[index], 'isEdit', true);
    },
    deleteRisk (index) {
      this.riskList.splice(index, 1);
      this.riskListBc[index] = null;
    },
    insertRisk (index) {
      this.riskList[index].isEdit = false;
      if (this.creditUrl) {
        this.riskList[index].credentialFile = this.creditUrl;
      }
    },
    cancleRisk (index) {
      if (this.riskListBc[index]) {
        this.$set(this.riskList, `${index}`, this.riskListBc[index]);
      } else {
        this.deleteRisk(index);
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.levelList = ProductData.riskLevelList;
      this.probList = ProductData.riskProbList;
      this.riskList = ProductData.riskRiskList;
      this.showTable = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 56px
$GAPWIDTH: 16px
.cp-product-man-risk
  .rk-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .rk-table
    position: absolute
    width: 640px
    top: $SEARCHHEIGHT
    left: $GAPWIDTH
    right: $GAPWIDTH
    bottom: $GAPWIDTH
    overflow: auto
    .table-wrap
      padding: 16px
      padding-bottom: 24px
      background-color: white
</style>
